<template>
  <div class="person">
    <!-- 
      09 watch监听器
     -->
     <h1>情况2: 监视ref定义的对象类型数据</h1>
     <h2>姓名: {{ person.name }}</h2>
     <h2>年龄: {{ person.age }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="changePerson">修改人</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, watch } from 'vue'
let person = ref({
  name: '张三',
  age: 19
})




const changeName = () => {
  person.value.name += '~'
}

const changeAge = () => {
  person.value.age +=1
}

const changePerson = () => {
  person.value = {name: '李四',
    age: 20
  }
}

// 情况一: 监视ref定义的对象类型的数据,监视的是对象的地址值, immediate: true}
// 如果想见识对象内部属性的变化,需要手动开启深度监视

// 这里监视的是Person的地址, 修改person.name,person.value 只是改了内存中的值,内存地址本身没变化
// newV 和 oldV一样都是新值, 因为本身地址没变
// 如果整个替换, 地址变了, newV和oldV值不相同, 则是两个不同的地址
// watch(person, (newV, oldV)=> {
//   console.log('person修改了',newV, oldV)
// })
watch(person, (newV, oldV)=> {
  console.log('person修改了',newV, oldV)
}, {deep: true})
</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>